<template>
  <div id="messageboard" >
    <!-- 弹幕的遮盖层 -->
    <cover v-if="coverIf" @closeClick="coverClick">
      <barrage :barragelist="barragelist"></barrage>
    </cover>

    <!-- 留言板本体 -->
    <div id="messageboardBody">
      <p class="fu-title gray" style="margin-bottom: -10px">MessageGit</p>
      <p class="title">MessageBoard</p>
      <learnmore :width="397" fontcolor="#8280F2" path="/aboutme" :pdleft="40"
        >Or do you want contact information</learnmore
      >
      <div id="messageAction">
        <lazyshow transition="fade-bottom">
          <card>
            <img
              slot="titleImg"
              v-lazy="
                require('@/assets/img/icon/security-identify.svg')
              "
              alt=""
            />
            <span slot="contentTitle">给我更多的建议和指导</span>
            <span slot="contents"
              >互相学习 互相进步 热爱code 互相内卷！</span
            >
          </card>
        </lazyshow>

        <lazyshow transition="fade-bottom">
          <card>
            <img
              slot="titleImg"
              v-lazy="require('@/assets/img/icon/security-fix.svg')"
              alt=""
            />
            <span slot="contentTitle">你也可以分享你的Code</span>
            <span slot="contents"
              >交流经验或者谈论任何与开发有关的内容都可以在这里留下.</span
            >
          </card>
        </lazyshow>

        <lazyshow transition="fade-bottom">
          <card>
            <img
              slot="titleImg"
              v-lazy="require('@/assets/img/icon/security-update.svg')"
              alt=""
            />
            <span slot="contentTitle">如果你也是模型爱好者</span>
            <span slot="contents"
              >我们或许可以谈论最近大班新出的mb样式系列.</span
            >
          </card>
        </lazyshow>
      </div>

      <lazyshow transition="fade-bottom">
        <div id="messageboardForm">
          <img
            id="formback"
            v-lazy="require('@/assets/img/form/formback.png')"
            alt=""
          />
          <messageform></messageform>
        </div>
      </lazyshow>
    </div>

    <!-- 留言板一览 -->
    <div id="messageboardShow">
      <p class="fu-title gray" style="margin-bottom: -10px">MessageShow</p>
      <p class="title">List of message contents</p>
      <learnmore :width="397" fontcolor="#8280F2" path="/aboutme" :pdleft="40"
        >Or do you want contact information</learnmore
      >
      <boardshow v-if="barragelist[0]" :barragelist="barragelist"></boardshow>
	</div>
    <footer-showtime></footer-showtime>
  </div>
</template>

<script>
import cover from "../components/common/cover/cover.vue";
import Barrage from "../components/messageboard/barrage/barrage.vue";
import Learnmore from "@/components/common/learnmore/learnmore.vue";
import Bus from "@/assets/js/bus.js";
import Card from "../components/messageboard/card/card.vue";
import Lazyshow from "@/components/common/lazyshow/lazyshow.vue";
import Messageform from "@/components/messageboard/form/messageform.vue";
import {httpGet,httpPost} from "@/network/request.js";
import FooterShowtime from '../components/footerShowTime/footerShowtime.vue';
import Boardshow from '../components/messageboard/boardshow/boardshow.vue';

export default {
  name: "messageboard",
  data() {
    return {
      property: "value",
      coverIf: false,
      barragelist: [

      ],
      boardShowIf:false,
    };
  },
  components: {
    cover,
    Barrage,
    Learnmore,
    Card,
    Lazyshow,
    Messageform,
    FooterShowtime,
    Boardshow,
  },
  methods: {
    coverClick() {
      this.coverIf = false;
      Bus.$emit("barrageshowOpen");
    },
  },
  created(){
    httpGet({
      url:'/messageboard',
    })
    .then(res=>{
      this.barragelist=res.data.messageboard
      this.coverIf=true
    })
    .catch(error=>{
      Bus.$emit("error",error)
    })
  },
  mounted() {
    Bus.$on("barrageClose", () => {
      if (document.querySelector("#barrage .barrageList") == null) {
        this.coverIf = false;
        Bus.$emit("barrageshowOpen");
      }
    });
    Bus.$on("barrageshowClose", () => {
      this.coverIf = true;
    });
    Bus.$on("isscroll", () => {
      this.coverIf = false;
      Bus.$emit("barrageshowOpen");
    });
 
   
  },
  watch: {},
  computed: {},
};
</script>

<style scoped>
p {
  margin: 0px;
  padding: 0px;
}
#messageboard {
  padding-top: 30px;
  position: relative;
  width: 100vw;
  background-color: #fdfdfd;
}
#messageboardBody {
  background-color: #fdfdfd;	
  width: 95%;
  padding-left: 2.5%;
  padding-right: 2.5%;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 1200px;
  position: relative;
  overflow: hidden;
  flex-direction: column;
  border-bottom: 1px solid gainsboro;
}
.title {
  font-family: "Alliance No.1", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
    "Segoe UI Symbol";
  font-size: 4rem;
  font-weight: bold;
  letter-spacing: 0.1rem;
  color: black;
  max-width: 900px;
  text-align: center;
}
.fu-title {
  font-family: "Alliance No.1", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
    "Segoe UI Symbol";
  font-size: 0.7rem;
  letter-spacing: 0.1rem;
}
#messageAction {
  margin-top: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1;
}
#messageboardForm {
  width: 740px;
  height: 460px;
  padding-left: 30px;
  padding-right: 30px;
  padding-top: 20px;
  padding-bottom: 20px;
  background: radial-gradient(
    227.48% 373.86% at 50% 220.45%,
    #9e7bff 31.77%,
    #3d8bd3 100%
  );
  margin-top: 50px;
  border-radius: 5px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 2.75px 2.21px rgb(0 0 0 / 7%), 0 6.65px 5.32px rgb(0 0 0 / 4%),
    0 12.5px 10px rgb(0 0 0 / 3%), 0 22px 18px rgb(0 0 0 / 3%),
    0 42px 33.4px rgb(0 0 0 / 2%), 0 100px 80px rgb(0 0 0 / 2%) !important;
}
#formback {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0.2;
}

#messageboardShow {
  background-color: #ECEFF1;
  width: 95%;
  padding-left: 2.5%;
  padding-right: 2.5%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 50px;
  position: relative;
  overflow: hidden;
  flex-direction: column;
}


</style>
